<template>
  <!-- <div class="cockpit-container" :style="{ backgroundImage: `url(${bgImgList})` }"> -->
    <div class="cockpit-container">
    <!-- 头部 -->
    <el-header>
      <el-row style="height: 100%">
        <el-col :span="3" style="height: 100%" class="top-info">
          <span>{{ currentTime }}</span>
          <div class="weather">
            <span>{{ weatherList.city }}</span>
            <span>{{ weatherList.weather }}</span>
            <span style="padding-top: 2px">{{ weatherList.temperature }}°</span>
          </div>
        </el-col>
        <el-col :span="18" class="top-menu" style="height: 100%">
          <el-menu
            :default-active="defaultRoute"
            mode="horizontal"
            @select="handleSelect"
            background-color="transparent"
            :ellipsis="false"
            ref="menuLeft"
          >
            <el-menu-item index="overview">园区概览</el-menu-item>
            <el-menu-item index="products">生产指标</el-menu-item>
            <el-menu-item index="equipment">设备运行</el-menu-item>
            <el-menu-item
              style="width: 60%; margin: 0 100px"
              disabled
            />
            <el-menu-item index="energy">能耗监测</el-menu-item>
            <el-menu-item index="alarm">告警事件</el-menu-item>
            <el-menu-item index="inspect">智能巡检</el-menu-item>
          </el-menu>
        </el-col>

        <el-col :span="3" class="right_button">
          <el-icon :size="16" style="margin-left: 10px" @click="returnBackend">
            <House />
          </el-icon>
          <screenfull
            id="screenfull1"
            @click="onFullScreen"
            class="right-screenfull"
            style="margin-left: 10px;margin-top: 5px"
          />
          <el-icon :size="16" style="margin-left: 10px" @click="logout">
            <SwitchButton />
          </el-icon>
        </el-col>
      </el-row>
      <div class="img-container">
        <img
          class="header-img"
          src="/src/assets/images/header-center.png"
          alt=""
        />
      </div>
    </el-header>
    <!-- 主要内容main -->
    <router-view class="main-content" style="position: relative;"/>
    <div class="float floatA">A区</div>
    <div class="float floatB">B区</div>
    <div class="float floatC">C区</div>
    <div class="float floatD">D区</div>
    <div class="float floatE">E区</div>
    <div class="float floatF">F区</div>

    <!-- 底部 -->
    <el-footer/>
  </div>
</template>

<script setup name="Cockpit" lang="ts">
import { ElMessageBox } from "element-plus";
import axios from "axios";
import { Screenfull } from '@/layout/components/Screenfull'
import { onMounted, ref, watchEffect, reactive, computed } from "vue";
import useSettingsStore from "@/store/modules/settings";
import {EnterpriseApi} from '@/api/farm/enterprise'
import { any } from "vue-types";
import { useUserStore } from '@/store/modules/user'
import { useTagsViewStore } from '@/store/modules/tagsView'

const router = useRouter();
const route = useRoute();
const defaultRoute = ref("overview");

const settingsStore = useSettingsStore();
// const appStore = useAppStore();
// const permissionStore = usePermissionStore();
// const userStore = useUserStore();

/** getCurrentInstance使用注意点
 * getCurrentInstance 只能在 setup 或生命周期钩子中使用
 * getCurrentInstance线上环境报错问题: 使用proxy代替ctx,proxy线上不会出现问题
 * 在vue3中不推荐使用getCurrentInstance获取组件实例
 * 如果是获取dom大家可以通过ref获取
 * 至于其他的一些常用属性和方法，vue3中的setup中提供了props和contexts上下文
 */
const { proxy } = getCurrentInstance();

const screenfullFlag = computed(() => settingsStore.screenfull);
// 所有的大屏路由信息
const routers = computed(() => permissionStore.cockpitRouters);

/** 创建一个响应式变量currentTime，初始值为空字符串 */
const currentTime = ref("");

const data = reactive({
  weatherList: {},
});

// 定义图片数组类型
interface AllList {
  id: number;
  name: string; 
  type:string
}
const { weatherList } = toRefs(data);
const bgImgList = ref<AllList[]>([])//背景图片
// 背景图片
const bgImg=()=>{
  const params = { type: 'bgImg' };
  EnterpriseApi.getHonorList(params).then(res=>{
    if(res){
      bgImgList.value = res.urls[0]
      console.log(bgImgList.value,'bgImgList.value');
    }else{
      return
    }
  }).catch(error=>{
    console.log(error,'error');
  })
}
const returnBackend = (e) => {
  router.push({ path: "/" });
};

const handleSelect = (key, keyPath) => {
  const targetPath ="/" + key;
  console.log(targetPath,'targetPath');
  
  // 判断当前的路径是否重复
  if (router.path === targetPath) {
    // 如果相同就不进行导航
    return ;
  }
  // 否则进行导航
  router.push({ path: "/farm/cockpit" + targetPath });
};

const changePage = (e) => {
  console.log("🚀 ~ changePage ~ changePage:", e);
};

/** 定义一个计算属性getCurrentTime，每次调用都会更新currentTime的值 */
function getCurrentTime() {
  const now = new Date();
  var str = "周" + "日一二三四五六".charAt(new Date().getDay());
  return `${now.toLocaleDateString()} ${str} ${now.toLocaleTimeString()}`;
}

/** 获取天气信息 */
function getWeather() {
  axios
    .get(
      "https://restapi.amap.com/v3/weather/weatherInfo?key=3d4fc89c6cad914202ee61538db8c0f4&city=360981&extensions=base"
    )
    .then((res) => {
      weatherList.value = res.data.lives[0];
    })
    .catch((err) => {});
}

onMounted(() => {
  const delimiter = "/";
  defaultRoute.value = getSecondPart(route.path, delimiter);
  bgImg()
});

function getSecondPart(str, delimiter) {
  console.log(str,'str');
  
  const parts = str.split(delimiter);
  if (parts.length > 1) {
    return parts[3];
  }
  return ""; // 如果没有第三部分，返回空字符串
}

// 使用 watchEffect 来响应数据的变化
watchEffect(() => {});

// 将计算属性作为watcher添加到页面上
setInterval(() => {
  currentTime.value = getCurrentTime();
}, 1000);

/** 大屏全屏点击事件 */
// function onFullScreen(e) {
//   if (!navbarTags.value) {
//     settingsStore.setNavbarTags(true);
//     appStore.toggleSideBarHide(false);
//   } else {
//     settingsStore.setNavbarTags(false);
//     appStore.toggleSideBarHide(true);
//   }
// }

function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      location.href = "/index";
    })
    .catch(() => {});
}

getWeather();
</script>

<style scope lang="scss">
#app{
  height: 100%;
  width: 100%;
  overflow: auto;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}
// 主体区域
.cockpit-container {
  position: relative;
  height: 1080px;
  width: 100vw;
  background: url("../../assets/images/4.jpg") no-repeat center;
  background-size: cover;
  .el-header {
    // background-color: aqua;
    z-index: 999;
    position: relative;
    color: #fff;
    width: 100%;
    height: 7%;
    background: url("../../assets/images/header.png") no-repeat center;
    background-size: cover;
    .top-info {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: start;
    }

    .top-menu {
      width: 100%;
      .el-menu {
        height: 100%;
        .el-menu-item {
          height: 100%;
          color: #fff;
          // padding: 0 16px;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
    .img-container {
      width: 38%;
      // height: 80%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .header-img {
      width: 100%;
      height: 100%;
    }
    .right_button {
      display: flex;
      justify-content: right;
      align-items: center;
      height: 100%;
      font-size: 16px;
      .fullScreen {
        background: transparent;
        border: none;
      }
    }
    .weather {
      display: flex;
      justify-content: start;
      gap: 10px;
      align-items: center;
      font-size: 16px;
    }
    .currentTime {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      font-size: 16px;
    }
  }
  .el-footer {
    position: relative;
    z-index: 999;
    width: 100%;
    height: 6%;
    background: url("../../assets/images/foot.png") no-repeat center;
    background-size: 100% 100%;
    text-align: center;
    .footer-img {
      width: 100%;
      height: 100%;
    }
  }
  .main-content {
    height: calc(1080px - 7% - 6%);
    position: relative;
    overflow: hidden;
  }

  .floatA {
    left: 24%;
    top: 53%;
  }
  .floatB {
    left: 38%;
    top: 39%;
  }
  .floatC {
    left: 50%;
    top: 30%;
  }
  .floatD {
    left: 59%;
    top: 23%;
  }
  .floatE {
    left: 34%;
    top: 55%;
  }
  .floatF {
    left: 66%;
    top: 27%;
  }

  .float {
    position: absolute;
    width: 90px;
    height: 90px;
    background: url("../../assets/images/float.png") no-repeat center;
    text-align: center;
    line-height: 60px;
    color: #fff;
    animation: shaking 1.5s infinite;
  }

  .cockpit-3d {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  @keyframes shaking {
    0% {
      transform: translateY(-0.2rem);
    }

    50% {
      transform: translateY(0.2rem);
    }

    100% {
      transform: translateY(-0.2rem);
    }
  }
}
</style>